<template>
  <div class="shop-swiper">
    <van-swipe
    class="my-swipe" 
    :autoplay="5000"  
    :stop-propagation="false"
    @change="onChange"
    v-if="banners.length">
      <van-swipe-item v-for="(banner, index) in banners" :key="index" class="swipe-item">
        <img :src="banner.pics_mid"  alt="">
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">
          {{ current + 1 }}&nbsp;/&nbsp;5
        </div>
      </template>
    </van-swipe>
    <div class="replace" v-else>
      <img src="~assets/img/common/none.png" alt="">
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Swipe, SwipeItem} from 'vant';

Vue.use(Swipe);
Vue.use(SwipeItem);

export default {
  name:'ShopSwiper',
  props:{
    banners:{
      type:Array,
      default(){
        return []
      }
    }
  },
  data(){
    return{
      current:0
    }
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
  },
}
</script>

<style scoped>
  .my-swipe .swipe-item{
    width: 100%;
    text-align: center;
  }
  .my-swipe .swipe-item img{
    width: 60%;
    margin: 15px 0;
  }
  .custom-indicator {
    color: #fff;
    position: absolute;
    right: 10px;
    bottom: 5px;
    padding: 3px 8px;
    font-size: 12px;
    border-radius: 10px;
    background: rgba(10, 10, 10, 0.3);
  }
  .replace{
    text-align: center;
  }
  .replace img{
    width: 60%;
    margin: 15px 0;
  }
</style>